<script setup>
import { ref, reactive } from "vue";
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import CodeEditor from "@/components/CodeEditor.vue";
import QuestionSelector from "@/components/QuestionSelector.vue";
import { ElMessage } from "element-plus";
import {
  addQuestionService,
  getQuestionDetailService,
  editQuestionService,
} from "@/api/questions";

// 控制抽屉显示/隐藏的响应式变量
const visibleDrawer = ref(false);
// 定义题目表单的响应式对象，包含所有题目字段
const formQuestion = reactive({
  questionId: "", // 题目ID，用于编辑时标识
  title: "", // 题目标题
  difficulty: "", // 题目难度
  content: "", // 题目内容（富文本）
  questionCase: "", // 题目测试用例
  timeLimit: "", // 时间限制（毫秒）
  spaceLimit: "", // 空间限制（字节）
  defaultCode: "", // 默认代码模板
  mainFuc: "", // 主函数代码
});

// 创建代码编辑器的引用，用于调用编辑器方法
const defaultCodeRef = ref(); // 默认代码编辑器引用
const mainFucRef = ref(); // 主函数代码编辑器引用

/**
 * 打开抽屉并初始化表单数据
 * @param {string|number} questionId - 题目ID，如果有则表示编辑模式，否则为新增模式
 */
async function open(questionId) {
  // 显示抽屉
  visibleDrawer.value = true;

  // 重置表单数据为空值
  for (const key in formQuestion) {
    if (formQuestion.hasOwnProperty(key)) {
      formQuestion[key] = "";
    }
  }

  // 如果传入了题目ID，则进入编辑模式
  if (questionId) {
    // 获取题目详情数据
    const questionDetail = await getQuestionDetailService(questionId);
    // 将题目详情数据填充到表单中
    Object.assign(formQuestion, questionDetail.data);
    // 设置代码编辑器的内容
    defaultCodeRef.value.setAceCode(formQuestion.defaultCode);
    mainFucRef.value.setAceCode(formQuestion.mainFuc);
  }
}

// 暴露 open 方法给父组件使用
defineExpose({
  open,
});

/**
 * 表单验证函数
 * @returns {string} 验证错误信息，验证通过返回空字符串
 */
function validate() {
  let msg = "";
  // 依次验证各个表单字段
  if (!formQuestion.title) {
    msg = "请添加题目标题";
  } else if (formQuestion.difficulty == "") {
    msg = "请选择题目难度";
  } else if (!formQuestion.timeLimit) {
    msg = "请输入时间限制";
  } else if (!formQuestion.spaceLimit) {
    msg = "请输入空间限制";
  } else if (!formQuestion.content) {
    msg = "请输入题目内容信息";
  } else if (!formQuestion.questionCase) {
    msg = "请输入题目用例名称";
  } else if (!formQuestion.defaultCode) {
    msg = "请输入默认代码";
  } else if (!formQuestion.mainFuc) {
    msg = "请输入main函数";
  } else {
    msg = ""; // 所有验证通过
  }
  return msg;
}

// 定义组件可以向父组件触发的事件
const emit = defineEmits(["success"]);

/**
 * 提交表单数据
 * 处理新增或编辑题目的逻辑
 */
async function onSubmit() {
  // 执行表单验证
  const errorMessage = validate();
  if (errorMessage) {
    // 验证失败，显示错误信息
    ElMessage.error(errorMessage);
    return false;
  }

  try {
    // 根据是否有题目ID判断是新增还是编辑
    if (formQuestion.questionId) {
      // 编辑题目请求
      await editQuestionService(formQuestion);
      ElMessage.success("编辑成功");
      // 触发成功事件，通知父组件编辑成功
      emit("success", "edit");
    } else {
      // 新增题目请求
      await addQuestionService(formQuestion);
      ElMessage.success("添加成功");
      // 触发成功事件，通知父组件添加成功
      emit("success", "add");
    }

    // 关闭抽屉
    visibleDrawer.value = false;
  } catch (error) {
    console.error("提交失败:", error);
    ElMessage.error("提交失败，请重试");
  }
}

/**
 * 处理默认代码编辑器内容变化
 * @param {string} content - 编辑器中的代码内容
 */
function handleEditorContent(content) {
  formQuestion.defaultCode = content;
}

/**
 * 处理主函数代码编辑器内容变化
 * @param {string} content - 编辑器中的代码内容
 */
function handleEditorMainFunc(content) {
  formQuestion.mainFuc = content;
}
</script>

<template>
  <el-drawer v-model="visibleDrawer" :with-header="false">
    <el-form :model="formQuestion" ref="formRef">
      <el-form-item label="题⽬标题:">
        <el-input
          style="width: 387px !important"
          v-model="formQuestion.title"
          placeholder="请输⼊标题"
        ></el-input>
      </el-form-item>
      <el-form-item label="题⽬难度:">
        <QuestionSelector
          style="width: 387px !important"
          v-model="formQuestion.difficulty"
          width="100%"
          placeholder="请选择题⽬难度"
        >
        </QuestionSelector>
      </el-form-item>
      <el-form-item label="时间限制（单位毫秒）:">
        <el-input
          style="width: 300px !important"
          v-model="formQuestion.timeLimit"
          placeholder="请输⼊时间限制"
        ></el-input>
      </el-form-item>
      <el-form-item label="空间限制（单位字节）:">
        <el-input
          style="width: 300px !important"
          v-model="formQuestion.spaceLimit"
          placeholder="请输⼊空间限制"
        ></el-input>
      </el-form-item>
      <el-form-item label="题⽬内容:">
        <div class="editor">
          <quill-editor
            placeholder="请输⼊题⽬内容"
            v-model:content="formQuestion.content"
            contentType="html"
          >
          </quill-editor>
        </div>
      </el-form-item>
      <el-form-item label="题⽬⽤例:">
        <el-input
          style="width: 387px !important"
          v-model="formQuestion.questionCase"
          placeholder="请输⼊题⽬⽤例"
        ></el-input>
      </el-form-item>
      <el-form-item label="默认代码块:">
        <code-editor
          ref="defaultCodeRef"
          :defaultCode="formQuestion.defaultCode"
          @update:value="handleEditorContent"
        ></code-editor>
      </el-form-item>
      <el-form-item label="main函数:">
        <code-editor
          ref="mainFucRef"
          :defaultCode="formQuestion.mainFuc"
          @update:value="handleEditorMainFunc"
        ></code-editor>
      </el-form-item>
      <el-form-item>
        <el-button
          class="question-button"
          type="primary"
          plain
          @click="onSubmit()"
          >发布</el-button
        >
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<style lang="scss">
.question-button {
  width: 200px;
}
</style>
